<script setup>
  import { ref } from 'vue'
  import { delPatientInfoApi, getpatientInfoListApi } from '@/server/patient'
  import { onShow } from '@dcloudio/uni-app'
  import { patientInfoStore } from '@/store/patient.js'

  // 侧滑按钮配置
  const swipeOptions = ref([
    {
      text: '删除',
      style: {
        backgroundColor: '#dd524d',
      },
    },
  ])

  const isPatientShow = ref(false)

  // 患者信息列表
  const patientList = ref([])
  // 获取患者信息
  async function getPatientInfoList() {
    const { data } = await getpatientInfoListApi()
    patientList.value = data.data
    isPatientShow.value = true
  }
  getPatientInfoList()

  onShow(() => {
    getPatientInfoList()
  })

  // 选中卡片
  const patientIndex = ref(0)

  // scroll-page的宽度
  const { windowHeight } = uni.getWindowInfo()

  // 删除患者
  async function onDelPientfn(item) {
    await delPatientInfoApi(item.id)
    getPatientInfoList()
  }

  // 点击下一步

  function onTopaymentfn() {
    const id = patientList.value[patientIndex.value].id
    patientInfoStore().patidentId = id
    uni.navigateTo({
      url: '/subpack_consult/payment/payment',
    })
  }

  const testList = [
    '110101198307212600',
    '110101196107145504',
    '11010119890512132X',
    '110101196501023433',
    '110101197806108758',
    '110101198702171378',
    '110101198203195893',
  ]

  // 身份证测试账号
  console.log('身份证测试账号：', testList)
</script>
<template>
  <scroll-page
    v-if="isPatientShow"
    :style="{ height: windowHeight - 3 + 'px' }"
  >
    <view class="patient-page">
      <view class="page-header">
        <view class="patient-title"> 请选择患者信息 </view>
        <view class="patient-tips">
          以便医生给出更准确的治疗，信息仅医生可见
        </view>
      </view>
      <uni-swipe-action>
        <uni-swipe-action-item
          :right-options="swipeOptions"
          @click="onDelPientfn(item, index)"
          v-for="(item, index) in patientList"
          v-bind:key="item.id"
        >
          <view
            class="archive-card"
            @click="patientIndex = index"
            :class="{ active: index === patientIndex }"
          >
            <view class="archive-info">
              <text class="name">{{ item.name }}</text>
              <text class="id-card">{{ item.idCard }}</text>
              <text class="default" v-if="item.defaultFlag === 1">默认</text>
            </view>
            <view class="archive-info">
              <text class="gender">{{ item.genderValue }}</text>
              <text class="age">{{ item.age }}岁</text>
            </view>
            <navigator
              hover-class="none"
              class="edit-link"
              :url="`/subpackPatient/from/index?id=${item.id}`"
            >
              <uni-icons
                type="icon-edit"
                size="20"
                color="#16C2A3"
                custom-prefix="iconfont"
              />
            </navigator>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>

      <!-- 添加按钮 -->
      <view v-if="patientList.length < 6" class="archive-card">
        <navigator
          class="add-link"
          hover-class="none"
          url="/subpackPatient/from/index"
        >
          <uni-icons color="#16C2A3" size="24" type="plusempty" />
          <text class="label">添加患者</text>
        </navigator>
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button
        @click="onTopaymentfn"
        :disabled="patientIndex === ''"
        class="uni-button"
      >
        下一步
      </button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>
